<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      .tag-input {
        position: relative;
        border: 1px solid #cccccc;
        padding: 0 5px;
        display: flex;
        flex-flow: row wrap;
      }
      .js-input {
        width: 450px;
        height: 22px;
        line-height: 22px;
        font-size: 16px;
        padding: 0;
        margin: 5px 0;
        outline: none;
        border: none;
        width: 6.5em;
        height: 24px;
        line-height: 24px;
      }
      .tag {
        padding: 0 10px;
        margin: 5px 5px 5px 0;
        background: #25bb9b;
        color: #ffffff;
        height: 24px;
        line-height: 24px;
        border-radius: 12px;
        font-size: 13px;
      }
    </style>
  </head>

  <body>
    <div class="tag-input">
      <span class="tag">前端</span>
      <span class="tag">编程题</span>
      <span class="tag">示例</span>
      <span class="tag">标签</span>
      <input
        type="text"
        class="js-input"
        maxlength="6"
        placeholder="请输入标签"
      />
    </div>
    <script type="text/javascript">
        /**
         * 使用绿球标记的部分为眨眼睛添加的,其他的内容为题目默认有的内容， 
         * 没啥难点，因为难点都被题目给的代码完成了，主要就是根据题意实现逻辑的判断处理
         */
      var tagInput = {
        isInited: false,
        init: init,
        bindEvent: bindEvent,
        addTag: addTag,
        removeTag: removeTag,
      };
      tagInput.init();

      function init() {
        var that = this;
        if (that.isInited) return;
        that.isInited = true;
        // 请修改这一行代码，保存class为js-input的输入框的dom元素引用
        that.input = null;
        that.input = document.querySelector(".js-input"); //🟢🟢⬅️
        that.bindEvent();
      }

      function bindEvent() {
        var that = this;
        var input = that.input;
        if (!input) return;
        input.addEventListener("keydown", function (event) {
          // 请修改这一行代码，判断用户是否按了回车键
          var isEnter = false;

          //🟢🟢⬇️
          if (event.keyCode === 13) {
            isEnter = true;
          }
          //🟢🟢⬆️

          // 请修改这一行代码，判断用户是否按了删除键
          var isDelete = false;

          //🟢🟢⬇️
          if (event.keyCode === 8) {
            isDelete = true;
          }
          //🟢🟢⬆️

          (isEnter || isDelete) && event.preventDefault();
          isEnter && that.addTag();
          isDelete && that.removeTag();
        });
        input.parentNode.addEventListener("click", function () {
          input.focus();
        });
      }

      //🟢🟢⬇️
      function addTag() {
        let input = document.querySelector(".js-input");
        let inputText = input.value.trim();
        input.value = "";
        let spans = document.querySelectorAll(".tag");

        //判断是否有重复的
        let isRepeat = Array.from(spans).find(function (span) {
          return span.innerHTML === inputText;
        });

        //重复或者为空直接返回
        if (!inputText || isRepeat) return;

        let span = document.createElement("span");
        span.classList.add("tag");
        span.innerHTML = inputText;
        //插入再input前面即作为最后一个标签
        input.parentNode.insertBefore(span, input);
      }

      function removeTag() {
        let input = document.querySelector(".js-input");

        //如果有输入逐个则删除输入
        if (input.value) {
          input.value = input.value.slice(0, -1);
          return;
        }

        let spans = document.querySelectorAll(".tag");
        //如果有标签则删除最后一个
        if (spans.length) {
          spans[spans.length - 1].remove();
          return;
        }
        //🟢🟢⬆️
      }
    </script>
  </body>
</html>
